<template>
  <div class="xtx-dialog" v-show="visible" ref="out">
    <div ref="box" class="new-box" :style="{width}">
      <h4 class="title">{{title}}</h4>
      <a class="close" href="javascript:;">
        <span @click="close()" class="iconfont icon-guanbi"></span>
      </a>
      <div class="body">
        <slot></slot>
      </div>
      <div class="footer" v-if="this.showCancel||this.showSubmit">
        <a v-if="showCancel" @click="cancel()" href="javascript:;" class="xtx-common-btn" type="info">{{cancelText}}</a>
        <a @click="submit()" href="javascript:;" class="xtx-common-btn" type="primary">{{submitText}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xtx-dialog',
  props: {
    title: {
      type: String
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '600px'
    },
    submitText: {
      type: String,
      default: '保存'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showSubmit: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    visible (newVal, oldVal) {
      setTimeout(() => {
        this.$refs.box.classList[newVal ? 'add' : 'remove']('down')
        this.$refs.out.classList[newVal ? 'add' : 'remove']('fade')
      }, 10)
    }
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
      this.$emit('on-cancel')
    },
    cancel () {
      this.$emit('on-cancel')
    },
    submit () {
      this.$emit('on-submit')
    }
  }
}
</script>

<style scoped lang='less'>
.xtx-dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  opacity: 0;
  &.fade {
    transition: all .4s;
    opacity: 1;
  }
  > .new-box {
    width: 600px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    &.down {
      transition: all .4s;
      top: 50%;
    }
    > .close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #cccccc;
      &:hover {
        color: #999;
      }
    }
    > .title {
      font-weight: normal;
      font-size: 18px;
      line-height: 70px;
      padding-left: 20px;
      height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }
    > .body {
      padding: 20px 75px;
      overflow-y: auto;
      max-height: 540px;
    }
    > .footer {
      padding: 10px 0 30px;
      text-align: center;
      > a {
        margin: 0 10px;
      }
    }
  }
}
</style>
